<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <!-- <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
        </div>
      </el-col> -->
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-table size="small" :data="productList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 80%;" max-height="400">
      <el-table-column align="center" prop="id" label="编号" width="200">
      </el-table-column>
      <el-table-column align="center" prop="goods.goodsName" label="商品名" width="200">
      </el-table-column>
      <el-table-column align="center" prop="goods.coverImg" label="商品图片" min-width="200">
        <template slot-scope="scope" v-if="scope.row.goods.coverImg">
          <el-image
            style="width: 100px"
            :src="scope.row.goods.coverImg"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="goods.originalPrice" label="原价（元）" width="200"></el-table-column> -->
      <el-table-column align="center" prop="goods.sellPrice" label="售价（元）" width="200"></el-table-column>
      <el-table-column align="center" prop="total" label="总共售出（份数）" min-width="200"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageQuery" @callFather="callFather"></Pagination>
    </div>
  </div>
</template>
<script>
import Pagination from '../../components/Pagination'
import Chart from 'echarts'
export default {
  name: "Product",
  data() {
    return {
      productList: [], // 产品列表
      loading: false, //是显示加载
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  // 导入组件
  components: {
    Pagination
  },
  created() { },
  mounted() {
    this.getProductList()
  },
  methods: {
   /**
    * 获取产品列表
    */
   getProductList () {
     this.$api.chart.salesByGood(this.pageQuery).then(res => {
       if (res.code === 200) {
         this.productList = res.data.records
       }
     })
   },
   /**
     * 分页插件事件
     */
    callFather(parm) {
      this.pageQuery.pageNum = parm.currentPage
      this.pageQuery.pageSize = parm.pageSize
      this.getCustomerList(this.pageQuery)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
